<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Label 标签示例</title>
</head>
<!--
 HTML 中，<label> 标签用于为表单控件（如 <input>、<textarea>、<select> 等）定义标签。它可以帮助用户理解表单控件的用途，并且点击 <label> 标签时，浏览器会自动将焦点移动到关联的表单控件上。
-->

<body>
<form>
    <!--<label> 标签可以通过 for 属性关联到一个表单控件。for 的值应该与表单控件的 id 值相同。-->
    <!--
    1. 当用户点击“用户名”这个标签文字时，光标会自动聚焦到关联的输入框中（在此示例中是 id="email" 的 <input>）。
	2.	这对提高可访问性非常有帮助，特别是在屏幕阅读器中，<label> 标签可以让用户更清楚地知道每个表单控件的用途。-->
    <label for="username">用户名:</label>
    <input type="text" id="username" name="username" placeholder="请输入用户名">
    <br><br>

    <label for="email">邮箱:</label>
    <input type="email" id="email" name="email" placeholder="请输入邮箱">

    <br><br>
    <label>
        邮箱:
        <input type="email" name="email" placeholder="请输入邮箱">
    </label>
</form>
</body>
</html>